<template>
	<view class="uni-global-box">
		<view class="uni-global-title">
			表格
		</view>
		<view class="body">
			<u-table class="u-table-basic"  >
				<u-tr style="" >
					<u-th class="u-table-th">基本表格</u-th>
					<u-th class="u-table-th">学校</u-th>
					<u-th class="u-table-th">班级</u-th>
					<u-th class="u-table-th">年龄</u-th>
					<u-th class="u-table-th" width="150px" >操作</u-th>
				</u-tr>
				<u-tr  v-for="(item,index) in tableData01" :key="index" 
					class="u-table-tr"
				>
					<u-td class="u-table-td" >0{{index +1 }}</u-td>
					<u-td class="u-table-td">{{item.name}}</u-td>
					<u-td class="u-table-td">{{item.level}}</u-td>
					<u-td class="u-table-td">{{item.age}}</u-td>
					<u-td class="u-table-td "  width="150px">
						<view class="u-table-td-util">
							<u-button size="mini" >
								<text class="iconfont icon-xiugai"></text>
								<text>修改</text>
							</u-button>
							<u-button size="mini" >
								<text class="iconfont icon-shuliang-zengjia"></text>
								<text>添加</text>
							</u-button>
						</view>
						
					</u-td>
				</u-tr>
			</u-table>
			<u-table class="u-table-senior" >
				<u-tr style="margin-right:15px;" >
					<u-th class="u-table-th">高级用法</u-th>
					<u-th class="u-table-th">学校</u-th>
					<u-th class="u-table-th">班级</u-th>
					<u-th class="u-table-th">年龄</u-th>
					<u-th class="u-table-th">时间</u-th>
					<u-th  width="150px" >操作</u-th>
				</u-tr>
				<view class="u-table-senior-body" style="height:180px" >
					<u-tr  v-for="(item,index) in tableData02" :key="index"
						class="u-table-tr"
					>
						<u-td class="u-table-td" >{{index<9?'0':''}}{{index +1 }}</u-td>
						<u-td class="u-table-td">{{item.name}}</u-td>
						<u-td class="u-table-td">{{item.money}}</u-td>
						<u-td class="u-table-td">{{item.notice}}</u-td>
						<u-td class="u-table-td">{{item.date}}</u-td>
						<u-td class="u-table-td " width="150px">
							<view class="u-table-td-util">
								<u-button size="mini" >
									<text class="iconfont icon-xiugai"></text>
									<text>修改</text>
								</u-button>
								<u-button size="mini" >
									<text class="iconfont icon-shuliang-zengjia"></text>
									<text>添加</text>
								</u-button>
							</view>
							
						</u-td>
					</u-tr>
				</view>
				<view class="u-table-senior-pagination">
					<uni-pagination title="标题文字" total="20"></uni-pagination>
				</view>
			</u-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData01:[
					{name:"浙江大学",level:"二年级",age:18},
					{name:"清华大学",level:"05班",age:25},
					{name:"北京大学",level:"大四",age:20},
					{name:"家里蹲大学",level:"大一新生",age:21},
					{name:"菏泽职业学院",level:"五年级",age:22},
					{name:"浙江大学",level:"二年级",age:18},
					
				],
				tableData02:[
					{name:"test2",money:"0.00",notice:'note',date:'2010-05-24'},
					{name:"test3",money:"200.00",notice:'Admin',date:'2010-05-24'},
					{name:"test4",money:"210.00",notice:'ote3ote3',date:'2010-05-24'},
					{name:"test5",money:"300.0",notice:'note2',date:'2010-05-24'},
					{name:"test15",money:"400.00",notice:'qiuuntion',date:'2010-05-24'},
					{name:"test88",money:"20.00",notice:'note2',date:'2010-05-24'},
					{name:"test2",money:"0.00",notice:'note',date:'2010-05-24'},
					{name:"test3",money:"200.00",notice:'Admin',date:'2010-05-24'},
					{name:"test4",money:"210.00",notice:'ote3ote3',date:'2010-05-24'},
					{name:"test5",money:"300.0",notice:'note2',date:'2010-05-24'},
					{name:"test15",money:"400.00",notice:'qiuuntion',date:'2010-05-24'},
					{name:"test88",money:"20.00",notice:'note2',date:'2010-05-24'},
				]
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss" >
	.body{
		height:250px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
</style>